<template>
  <div class="app-container full-height">
    <l-map
      :center="center"
      :options="options"
      :zoom="zoom"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate"
    >
      <l-tile-layer v-for="(item, index) in urls" :key="index" :url="item" />
      <l-circle
        v-for="(circle, index) in circles"
        :key="`circle${index}`"
        :color="circle.color"
        :fill-color="circle.color"
        :lat-lng="circle.center"
        :opacity="0"
        :radius="circle.radius"
        @click="showCircle(circle)"
      />

      <l-polyline
        v-for="(item, index) in latlngs"
        :key="`polyline${index}`"
        :lat-lngs="item"
      />
      <l-marker
        v-for="(item, index) in devicesFilter"
        :key="`device${index}`"
        :icon="getIcon(item)"
        :lat-lng="[item.lat, item.lng]"
        :title="item.name"
        @click="showDevice(item)"
      >
        <l-tooltip :options="markerOptions">
          <div>
            {{ item.name }}
          </div>
        </l-tooltip>
      </l-marker>
    </l-map>
    <control ref="control" />
    <el-dialog
      v-drag
      :title="deviceTitle"
      :visible.sync="deviceVisible"
      width="1000px"
    >
      <span v-if="currentDevice" slot="title" class="device-header">
        <el-image
          class="device-image"
          :fit="fit"
          :src="getDeviceImage(currentDevice)"
        />
        {{ currentDevice.name + ' —— ' + currentDevice.serialno }}
      </span>
      <div style="height: 640px; overflow-y: scroll"><pg /></div>
    </el-dialog>
    <mqtt-container />
  </div>
</template>

<script>
  import { map, dclassCodeMap, irrTypes } from '@/utils/constant'
  import Control from './components/Control'
  import Pg from '@/components/Device/Pg'
  import MqttContainer from '@/components/MqttContainer'
  import { getDeviceStatus, getDeviceImage } from '@/utils/device'
  import { mapGetters } from 'vuex'
  import { convertArr2Obj } from '@/utils/index'
  import * as turf from '@turf/turf'
  export default {
    components: {
      Control,
      Pg,
      MqttContainer,
    },
    data() {
      return {
        fit: 'fill',
        zoom: 17,
        center: map.center,
        options: map.options,
        urls: map.mapTypes[map.initType],
        markerOptions: {
          permanent: true,
          interactive: false,
          direction: 'bottom',
          offset: [0, 8],
          className: 'anim-tooltip',
        },
        circles: [
          {
            serialno: '0110.0007.2027000724',
            name: '大曹庄农场喷灌机-0724',
            radius: 150,
            center: [37.467294, 114.913504],
            color: `rgba(248, 9, 9, 1)`,
            lat: 37.467294,
            lng: 114.913504,
            latlngs: [
              [37.467294, 114.913504],
              [37.46771532274502, 114.91188941023749],
            ],
          },
          {
            serialno: '0112.0007.2318004293',
            name: '喷灌机-4293',
            radius: 189.8,
            center: [37.509167, 114.873333],
            color: `rgba(248, 9, 9, 1)`,
            lat: 37.509167,
            lng: 114.873333,
            latlngs: [
              [37.509167, 114.873333],
              [37.50746275136412, 114.873212887299],
            ],
          },
        ],
        serialno: '',
        deviceTitle: '',
        deviceVisible: false,
        currentDevice: null,
        dclassCodeMap,
      }
    },
    computed: {
      ...mapGetters(['devices', 'plant', 'irrType']),
      irrTypeAttr() {
        const irrTypesObj = convertArr2Obj(irrTypes, 'value')
        const item = irrTypesObj[this.irrType]
        return {
          name: item.name,
          title: '当前灌溉模式为：' + item.name || '',
          type: item.type || '',
        }
      },
      devicesFilter() {
        const res = this.devices.filter((val) => {
          return +val.product_type === dclassCodeMap.pg && val.map_show > 0
        })

        return res
      },
      latlngs() {
        const sprinklers =
          this.devices.filter((val) => {
            return +val.product_type === +dclassCodeMap.pg
          }) || []
        const res = []
        sprinklers.forEach((item) => {
          const startPos = [+item.lng, +item.lat]
          const radius = +item.settings.radius / 1000
          let angle = 0
          if (item.states.Angle !== undefined) {
            angle = +item.states.Angle
          }
          if (item.states.REG_HMI_GPS !== undefined) {
            angle = +item.states.REG_HMI_GPS
          }
          const endPos = this.getPoint(startPos, radius, angle)

          res.push([
            [startPos[1], startPos[0]],
            [endPos[1], endPos[0]],
          ])
        })
        return res
      },
    },
    watch: {
      plant: {
        handler(newVal) {
          console.log(newVal)
        },
        deep: true,
        immediate: true,
      },
    },
    created() {
      this.$baseNotify(
        this.irrTypeAttr.title,
        '提示',
        'warning',
        'bottom-right',
        0
      )
    },
    methods: {
      getPoint(startPos, distance, bearing) {
        const point = turf.point(startPos)
        const destination = turf.destination(point, distance, bearing)

        return destination.geometry.coordinates
      },
      getDeviceStatus(device) {
        return getDeviceStatus(device)
      },
      getDeviceImage(device) {
        return getDeviceImage(device)
      },
      closeAlert() {
        console.log(123)
        return
      },
      zoomUpdate(zoom) {
        this.zoom = zoom
      },
      centerUpdate(center) {
        this.center = center
      },
      showCircle(row) {
        console.log(this.devices, row)
        this.$baseMessage('设置当前喷灌机为默认喷灌机', 'success')
      },

      showDevice(currentDevice) {
        this.currentDevice = currentDevice
        this.$store.commit('device/SET_CURRENT_DEVICE', currentDevice)
        this.$store.commit('device/SET_CURRENT_DEVICE_SHOW', true)
        this.serialno = currentDevice.serialno
        this.deviceTitle = currentDevice.name
        this.deviceVisible = true
      },
      getIcon(item) {
        // eslint-disable-next-line no-undef
        return L.icon({
          iconSize: [28, 28],
          iconUrl: getDeviceImage(item),
        })
      },
      setCurrentDevice(item) {
        this.serialno = item.serialno
        this.center = item.center
      },
    },
  }
</script>
<style lang="scss" scoped>
  .devices {
    position: absolute;
    top: 24px;
    left: 64px;
    z-index: 9999;
    padding: 6px 0;
    color: #333;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    dl {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      margin-block-start: 0;
      margin-block-end: 0;
      cursor: pointer;
      &:hover {
        background: #ddd;
      }
    }
  }
  .app-container {
    position: relative;
  }
</style>
<style lang="scss">
  .anim-tooltip {
    padding-top: 0;
    font-size: 12px;
    color: #fff;
    background: none;
    border: none;
    box-shadow: none;
    transform: scale(0.8);
  }
  .anim-tooltip:before {
    border-bottom-color: rgba(0, 0, 0, 0);
  }
  .device-header {
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  .device-image {
    width: 32px;
    height: 32px;
    margin-right: 8px;
  }
</style>
